<template>
    <div class="page-a">

      <!-- 搜索部分 -->
      <div class="h-search">
          <Form ref="formInline" label-position="left" :model="formInline" :rules="ruleInline" inline>
            <FormItem prop="user">
                <Row>
                  <Col span="6"><label class="item-title">你好：</label></Col>
                  <Col span="16"><Input type="text" v-model="formInline.user" placeholder="Username"></Input></Col>
                </Row>                              
            </FormItem>
            <FormItem prop="password">
               <Row>
                  <Col span="6"><label class="item-title">标题：</label></Col>
                  <Col span="16"><Input type="text" v-model="formInline.user" placeholder="Username"></Input></Col>
                </Row>  
            </FormItem>
            <FormItem prop="a">
                <Row>
                  <Col span="6"><label class="item-title">分组方式：</label></Col>
                  <Col span="16">
                    <Select v-model="model1" style="width:200px">
                      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </Col>
                </Row>  
                
            </FormItem>
            <FormItem prop="b">
                  <Row>
                  <Col span="6"><label class="item-title">推送类型：</label></Col>
                  <Col span="16">
                    <Select v-model="model1" style="width:200px">
                      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </Col>
                </Row>  
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
            </FormItem>
        </Form>
      </div>

      <!-- 列表部分 -->
      <div class="p-list">
         <i-table stripe  border  :content="self" :columns="columns1" :data="data1"></i-table>
      </div>
        <!--分页内容-->
        <div class="page-box">
            <Page :total="100" show-elevator></Page>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      model1: "",
      model2: "",
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        }
      ],
      types: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        }
      ],
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur"
          }
        ]
      },
      columns1: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "年龄",
          key: "age"
        },
        {
          title: "地址",
          key: "action",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "View"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "Delete"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居"
        },
        {
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗"
        },
        {
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道"
        },
        {
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道"
        },
        {
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居"
        },
        {
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗"
        },
        {
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道"
        },
        {
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道"
        },
        {
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道"
        },
        {
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道"
        }
      ]
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.page-a {
  .h-search {
    box-sizing: border-box;    
    padding: 20px;
    padding-bottom: 0;
    border-bottom: 1px solid #ececec;
    margin: 0 0 20px;
    .item-title {
      display: block;
      margin: 2px 0 0 0;
    }
  }

  .page-box {
    text-align: center;
    margin: 20px auto;
  }
}
</style>